<!--  -->
<template>
  <div class="carousel" v-if="isShow">
      <div class="closeCarousel" @click="closeCarousel">
          <span class="iconfont icon-close"></span>
      </div>
    <Carousel  v-model="value1"  :height='height' dots='none'>
      <CarouselItem v-for="(item , index) in urlImg" :key="index">
        <div class="demo-carousel" ref="xiesj" :style="{backgroundImage:'url('+item.url+')',backgroundSize:item.isLarge==1?'contain':'auto', backgroundColor: bgColor}">

        </div>
      </CarouselItem>
      <!-- <CarouselItem>
        <div class="demo-carousel" >

        </div>
      </CarouselItem>
      <CarouselItem>
        <div class="demo-carousel" >

        </div>
      </CarouselItem> -->
    </Carousel>
  </div>
</template>

<script>
export default {
  props:{
      isCarousel:{
          type:Boolean,
          default:false
      },
      imgSrc:{
          type:Array,
          default:()=>{return []}
      },
      curIndex:{
          type:Number,
          default:0
      },
      bgColor: {
        type: String,
        default: ''
      }
  },
  data() {
    return {
        height:0,
        value1: 0,
        isShow:false,
        imgUrl:[
            // 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562829289597&di=0ccc9eac046c66a58c98194d928cec22&imgtype=0&src=http%3A%2F%2Fpic37.nipic.com%2F20140113%2F8800276_184927469000_2.png',
            // 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562829289595&di=f67ac158232f118f105c62840dd29eb1&imgtype=0&src=http%3A%2F%2Fpic31.nipic.com%2F20130801%2F11604791_100539834000_2.jpg',
            // require('./13.png'),
            // require('./12.jpg')
            ],
        urlImg:[],
        img:require('./12.jpg'),
        img1:require('./13.png'),
        img2:require('./lufei.jpeg'),
    };
  },

  components: {},
  created(){
    this.imgUrl = this.imgSrc;
    this.initImageStyle();
    this.value1 = this.curIndex;
  },
  methods: {
      getWindowHeight(){
          var h = document.documentElement.clientHeight || document.body.clientHeight;
          this.height = h*0.8;
      },
      closeCarousel(){
          this.isShow = false;
          this.$emit('handCarousel',false)
      },
      initImageStyle(){
        let arr=[];
        let self = this;
         var w = document.documentElement.clientWidth || document.body.clientWidth;
         var h = document.documentElement.clientHeight || document.body.clientHeight;
        let carouselWidth = w*0.8;
        let carouselHeight =h*0.8;
          this.imgUrl.forEach((elem,index)=>{

              let img = new Image();
              let obj={
                  isLarge:'',
                  url:''
              }
              img.src = elem;
              img.onload = () =>{
                let naturalHeight = img.naturalHeight;
                let naturalWidth = img.naturalWidth;
                if(naturalWidth>carouselWidth || naturalHeight>carouselHeight){
                    obj.isLarge=1;
                    obj.url = elem;
                    self.urlImg.push(obj);
                }else{
                    obj.isLarge=0;
                    obj.url = elem;
                    self.urlImg.push(obj);
                }
                }
          })

      }

  },

  computed: {
      showCarousel(){
          this.isShow = this.isCarousel;
      }
  },
  watch:{
      showCarousel(a,b){

      }
  },
  mounted() {
      this.getWindowHeight();
     console.log(this.imgSrc);

  }
};
</script>
<style lang='less'>
.carousel{
    position: fixed;
    z-index: 999;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    display:flex;
    align-items: center;
    justify-content: center;
    .ivu-carousel{
        width: 80%;
        .demo-carousel{
            width: 100%;
            height: 100%;
            // background-image: url('./12.jpg');
            background-position: center;
            background-repeat: no-repeat;
            // background-size: contain;
            // display: flex;
            // justify-content: center;
            // align-items: center;
            img{
                width: 100%;
            }
        }
    }
    .closeCarousel{
        position: absolute;
        right: 40px;
        top: 40px;
        .iconfont{
            font-size: 30px;
            &:hover{
                color: #ffffff;
                cursor: pointer;
            }
        }
    }
}
// 覆盖默认样式
.carousel .closeCarousel .iconfont {
    color: #ffffff;
}
.ivu-carousel-arrow-hover {
    font-size: 27px;
}
</style>
